import React, { useEffect, useRef } from "react";
import lottie, { type LottiePlayer } from "lottie-web";

interface Props {
  className?: string;
  animationData: any;
}

const Lottie: React.FC<Props> = (props) => {
  const lottieRef = useRef<HTMLDivElement | null>(null);
  const lottieInstance = useRef<LottiePlayer | null>(null);

  useEffect(() => {
    if (lottieRef.current) {
      // @ts-expect-error lottie
      lottieInstance.current = lottie.loadAnimation({
        container: lottieRef.current,
        renderer: "svg",
        loop: true,
        autoplay: true,
        animationData: props.animationData
      });
    }
    return () => {
      lottieInstance.current && lottieInstance.current.destroy();
    };
  }, []);

  return <div ref={lottieRef} className={props.className}></div>;
};

export default React.memo(Lottie);
